/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { pxToDp } from '../../../utils/stylesKits';
import SvgUri from 'react-native-svg-uri';
import { iconman_sel, iconnv } from '../../../assets/icons/svgs';
import userInfoStyles from './style';
import { Input } from 'react-native-elements/dist/input/Input';
import  DatePicker from 'react-native-datepicker';
class UserInfo extends Component {
    state = {
        nickname: "", // 昵称
        gender: "男", // 性别
        birthday: "", // 生日
        city: "", // 城市
        header: "", // 头像
        lng: "", // 经度
        lat: "", // 纬度
        address: "" // 详细地址
    }
    render() {
        const { gender, nickname, birthday } = this.state;
        const dateNow = new Date();
        // 当前时间
        const currentDate = `${dateNow.getFullYear()}-${dateNow.getMonth()+1}-${dateNow.getDate()}`;
        return (
            <View style={{ backgroundColor: '#fff', flex: 1, padding: pxToDp(20) }}>
                <Text style={userInfoStyles.headerText}>填写资料</Text>
                <Text style={userInfoStyles.headerText}>提升我的魅力</Text>
                <View style={{ marginTop: pxToDp(20) }}>
                    <View style={userInfoStyles.manIconWrapper}>
                        <TouchableOpacity onPress={() => this.setState({ gender: '男' })} style={{ ...userInfoStyles.manIcon, backgroundColor: gender === '男' ? 'red' : '#eee' }} >
                            <SvgUri svgXmlData={iconman_sel} width='35' height='35' />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.setState({ gender: '女' })} style={{ ...userInfoStyles.manIcon, backgroundColor: gender === '女' ? 'red' : '#eee' }} >
                            <SvgUri svgXmlData={iconnv} width='35' height='35' />
                        </TouchableOpacity>
                    </View>
                </View>
                {/* 昵称输入框 */}
                <View>
                    <Input
                        value={nickname}
                        placeholder='设置昵称'
                        onChangeText={(nickname) => this.setState({ nickname })}
                        style={{ color: '#000' }}
                    />
                </View>
                {/* 生日日期选择 */}
                <View>
                    <DatePicker
                        androidMode="spinner"
                        style={{ width: '98%' }}
                        date={birthday}
                        mode="date"
                        placeholder="设置生日"
                        format="YYYY-MM-DD"
                        minDate="1900-01-01"
                        maxDate={currentDate}
                        confirmBtnText="确认"
                        cancelBtnText="取消"
                        customStyles={{
                            dateIcon: {
                                display: 'none',
                            },
                            dateInput: {
                                marginLeft: 10,
                                borderWidth:0,
                                borderBottomWidth:pxToDp(1),
                                borderBottomColor:'#000',
                                alignItems:'flex-start',
                                paddingLeft:pxToDp(4)
                            },
                            placeholderText:{
                                fontSize:pxToDp(15),
                                color: '#999',
                            }
                        }}
                        onDateChange={(birthday) => { this.setState({ birthday: birthday }) }}
                    />
                </View>
            </View>
        );
    }
}
export default UserInfo;

const styles = StyleSheet.create(userInfoStyles);